<%--
  Created by IntelliJ IDEA.
  User: 李志文
  Date: 2024/4/19
  Time: 16:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>找回密码的页面:</title>
    <%-- 引入jquery文件: --%>
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script>
        /* 页面加载完成: */
        $(function (){
            //给下一步的按钮绑定点击事件:
            $("#btn").click(function (){
                getUserByName();
                //如果文本框中的内容发生改变情况提示信息:
                $("#uname").change(function (){
                    $("#span").html("");
                });
            });
            yuLan();
        });
        //声明一个验证账号的函数:
        function getUserByName(){
            //获取文本框中输入账号:
            var uname = $("#uname").val().trim();
            if(uname != ""){
                //使用ajax一部传输数据:
                $.ajax({
                    url:"/UserController/getUserByName/"+uname,
                    type:"post",
                    dataType:"json",//接受数据类型
                    success:function (data){
                        alert(data.uimage);
                        if(data == "false"){//账号不存在
                            $("#span").attr("style","color:red");
                            $("#span").html("账号错误，请重新输入!!!");
                        }else {
                            $("#uname").attr("readonly", true);
                            $("p:not(:first)").show();
                            var img = $("<img src='/images/"+data.uimage+"' id='img' width='70px' height='70px' style='border-radius: 50%'/>")
                            $("#imgSpan").before($(img));
                            $("#btn").attr("type", "submit");
                            $("#btn").unbind("click");
                            $("#btn").attr("value", "确认修改");
                        }
                    },
                    error:function (){
                        alert("请求失败!!!!");
                    }
                });
            }
        }
        //判断两次密码输入是否一致:
        function repwd(){
            //声明一个变量代表表单状态:
            var flag = false;
            //获取两次密码输入的值:
            var pwd =  $("#upwd").val();
            var repwd = $("#reupwd").val();
            //判断两次密码是否一致:
            if(pwd == repwd){//一致
                $("#error").html("");
                flag = true;//表单可以提交
            }else{//不一致
                $("#error").html("两次密码输入不一致!!!")
                flag = false;//表单不能提交
            }
            return flag;
        }
        //图片预览:
        function yuLan(){
            //文件域发生改变的时候:
            $("#myFile").change(function(){
                //获取上传文件的名字:
                var name = this.files[0].name;
                //截取文件的后缀名:
                var houZhui = name.substring(name.lastIndexOf("."));
                if(".png" == houZhui || ".jpg" == houZhui || ".gif" == houZhui){
                    //创建一个fileReader的对象:
                    var fileReader =new FileReader();
                    //把要上传的图片内容读取程路径:
                    fileReader.readAsDataURL(this.files[0]);
                    //读取完成之后使用路径:
                    fileReader.onload = function (){//文件读取完成.
                        $("#img").attr("src",fileReader.result);
                    }
                }else{//不是图片类型:
                    alert("不是图片类型，不能上传!!!!");
                    return;
                }
            });
        }
    </script>
</head>
<body>
<center>
    <fieldset style="width: 30%;">
        <legend>|找回密码</legend>
        <form action="/UserController/updateUser" method="post" enctype="multipart/form-data" onsubmit="return repwd()">
            <p>
                <label for="uname" style="margin-left: -90px">请输入账号:</label><br><br>
                <input type="text" name="uname" id="uname" required placeholder="账号" /><br>
                <span id="span"></span>
            </p>
            <p style="display: none">
                <label for="myFile" style="margin-left: -100px">头像</label><br>
                <span id="imgSpan">
               <input type="file" name="myfile" id="myFile" multiple  style="margin-left: 150px"/>
              </span>
            </p>
            <p style="display: none">
                <label for="upwd" style="margin-left: -140px">密码:</label><br><br>
                <input type="password" name="upwd" id="upwd" required/>
            </p>
            <p style="display: none">
                <label for="reupwd" style="margin-left: -110px">确认密码:</label><br><br>
                <input type="password" name="reupwd" id="reupwd" required/><br>
                <span id="error" style="color: red"></span>
            </p>
            <input type="button" value="下一步" id="btn"/>
        </form>
    </fieldset>
</center>
</body>
</html>
